<alchemy-element-editor
  id="element_<%= element.id %>"
  data-element-id="<%= element.id %>"
  data-element-name="<%= element.name %>"
  class="<%= element.css_classes.join(" ") %>"
  <%= element.compact? ? "compact" : nil %>
  <%= local_assigns[:created] ? "created" : nil %>
  <%= element.fixed? ? "fixed" : nil %>
>
  <% unless element.fixed? %>
    <%= render 'alchemy/admin/elements/header', element: element %>
  <% end %>

  <%= render 'alchemy/admin/elements/toolbar', element: element %>

  <% element.definition.message.tap do |message| %>
    <%= render_message(:info, sanitize(message)) if message %>
  <% end %>

  <% element.definition.warning.tap do |warning| %>
    <%= render_message(:warning, sanitize(warning)) if warning %>
  <% end %>

  <% if element.editable? %>
    <%= form_for [alchemy, :admin, element], remote: true,
      html: {id: "element_#{element.id}_form".html_safe, class: 'element-body'} do |f| %>

      <div id="element_<%= element.id %>_errors" class="element_errors hidden">
        <alchemy-icon name="alert"></alchemy-icon>
        <p><%= Alchemy.t(:ingredient_validations_headline) %></p>
      </div>

      <!-- Ingredients -->
      <% if element.has_ingredients_defined? %>
        <div class="element-ingredient-editors">
          <%= render element.ingredients.select { !_1.definition.group }, element_form: f %>

          <!-- Each ingredient group -->
          <% element.ingredients.select { _1.definition.group }.group_by { _1.definition.group }.each do |group, ingredients| %>
            <%= content_tag :details, class: "ingredient-group", id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %>
              <summary>
                <%= element.translated_group group %>
                <%= render_icon "arrow-left-s" %>
              </summary>
              <%= render ingredients, element_form: f %>
            <% end %>
          <% end %>
        </div>
      <% end %>

      <% if element.taggable? %>
        <%= render Alchemy::Admin::TagsAutocomplete.new do %>
          <%= f.label :tag_list %>
          <%= f.text_field :tag_list, value: f.object.tag_list.join(",") %>
        <% end %>
      <% end %>
    <% end %>

    <%= render 'alchemy/admin/elements/footer', element: element %>
  <% end %>

  <%# We need to render nested elements even if the element is folded,
      because we need the element present in the DOM for the feature
      "click element in the preview => load and expand element editor". %>
  <% if element.nestable_elements.any? %>
    <div class="nestable-elements">
      <%= content_tag :div,
        id: "element_#{element.id}_nested_elements",
        class: "nested-elements", data: {
          'droppable-elements' => element.nestable_elements.join(' '),
          'element-name' => element.name
        } do %>
        <%= render element.all_nested_elements.map { |element|
          Alchemy::ElementEditor.new(element)
        } %>
      <% end %>

      <%= render "alchemy/admin/elements/add_nested_element_form", element: element %>
    </div>
  <% end %>
</alchemy-element-editor>
